<template>
<div class="pro">
    <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
      <van-cell v-for="item in searchArr1" :key="item.proid">
        <img :src="item.img1" alt="">
        <p class="p0">{{ item.proname }}</p>
        <h5>${{ item.originprice }}</h5>
      </van-cell>
    </van-list>
  </div>
</template>

<script lang="ts" setup>
import {ref } from 'vue' 
import {getSearchData} from '@/api/search'
import type { cartListItem } from '@/types/homeType'
import { showNotify, closeNotify } from 'vant';

// 消息提示
showNotify({
  message: '热门搜索',
  color: 'white',
  background: '#58be6a',
  duration: 1000,
});

const keyword = ref('')
const searchArr = ref<Array<cartListItem>>([])
const searchArr1 = ref<Array<cartListItem>>([])
const loading = ref(false);
const finished = ref(false);
const count1 = ref<number>(1)

// 搜索列表接口
const getSearchFn = ()=>{
  getSearchData(
  {
    count:count1.value,
    limitNum:10,
    keyword:keyword.value
  }
).then(res=>{
  console.log('搜索列表' ,res);
  searchArr.value = res.data.data

  searchArr.value.forEach(item => {
  searchArr1.value.push(item)
});
 // 加载状态结束
 loading.value = false;
    count1.value++
    console.log('count1', count1.value);
    // 数据全部加载完成
    if (res.data.data.length == 0) {
      finished.value = true;
    }
  })

}
getSearchFn();
const onLoad = () => {
  // 异步更新数据
  getSearchFn();

}

</script>
 
<style scoped lang="scss">
.pro {
  :deep(.van-list) {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    padding: 0 5px;

    .van-cell {
      width: 50%;
      text-align: center;

      img {
        width: 100%
      }

      .p0 {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 13px;
      }

      h5 {
        color: red;
        text-align: center;
      }
    }
  }
}
  
</style>